<template>
  <jb-page>
    <div class="vdb-container">
      <n-card title="文本向量化" class="mb-4">
        <n-space vertical size="large">
          <div class="input-section">
            <n-input
              v-model:value="form.text"
              type="textarea"
              placeholder="请输入需要向量化的文本内容..."
              :autosize="{ minRows: 6, maxRows: 10 }"
              class="vector-input"
            />
          </div>
          
          <div class="control-section">
            <n-space justify="end" align="center">
              <jb-select
                class="resource-select"
                url="/embeddingResource/listAllEnabledType"
                v-model:value="form.model"
                placeholder="请选择Embedding资源"
                label-field="name"
                value-field="sn"
              />
              <n-button
                :loading="loading"
                type="primary"
                @click="handleSubmit"
                class="submit-button"
              >
                向量化
              </n-button>
            </n-space>
          </div>
        </n-space>
      </n-card>

      <n-card title="向量结果" style="flex:1;display:flex;flex-direction:column;margin-top:16px" v-if="vectorResult" class="result-card">
        <template #header-extra>
          <div style="width: 100%;display: flex;justify-content: end;font-size: 16px"><span>维度：{{vectorResult.length}}</span></div>
        </template>
        <n-space vertical style="flex:1;min-height:0">
          <div class="vector-data" style="flex:1;min-height:0">
            <n-collapse style="height:100%" :default-expanded-names="['vector']">
              <n-collapse-item title="向量数据" name="vector" style="height:100%">
                <pre class="vector-content">{{ vectorResult }}</pre>
              </n-collapse-item>
            </n-collapse>
          </div>
        </n-space>
      </n-card>
    </div>
  </jb-page>
</template>

<script setup>
import { ref } from "vue"
import { useMessage } from 'naive-ui'
import { JBoltApi } from "@/service/request/index.js"

const message = useMessage()
const loading = ref(false)
const vectorResult = ref(null)

const form = ref({
  text: '',
  model: ''
})

async function handleSubmit() {
  if (!form.value.text) {
    message.warning('请填写完整信息')
    return
  }
  if (!form.value.model) {
    message.warning('请选择Embedding资源')
    return
  }

  loading.value = true
  try {
    const { result } = await JBoltApi.post(`/demo/dimensionDemo`, {
      text: form.value.text,
      model: form.value.model
    })

    console.debug('data',JSON.stringify(result.data))
    vectorResult.value = result.data
  } catch (error) {
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>


.vdb-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

.input-section {
  width: 100%;
}

.vector-input {
  width: 100%;
  border-radius: 4px;
}

.control-section {
  margin-top: 16px;
}

.resource-select {
  width: 240px;
}

.submit-button {
  min-width: 100px;
}

.result-card {
  overflow: hidden;
}

.vector-data {
  display: flex;
  flex-direction: column;
}

.vector-content {
  height: 100%;
  overflow: auto;
  padding: 12px;
  background: #f5f7fa;
  border-radius: 4px;
  font-family: monospace;
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}

:deep(.n-card-header) {
  font-weight: 500;
}

:deep(.n-input) {
  background-color: #fff;
}
</style>